<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <!--<el-radio-group v-model="query.type" @change="queryList(1)">
        <el-radio label="科目" />
        <el-radio label="章节" />
      </el-radio-group>-->
      <el-upload
        :show-file-list="false"
        :action="version + '/uploadExcelFile'"
        :before-upload="beforeUpload"
        :on-success="uploadSuccess"
        style="float: left"
        name="file">
        <el-button :loading="loading" size="small" type="primary">上传题目</el-button>
      </el-upload>
      <el-button style="float: right; padding: 3px 0;" type="text">
        <router-link to="/problems-manager/problems/edit">添加题目</router-link>
      </el-button>
    </div>
    <el-table
      v-loading.body="queryLoading"
      :data="items"
      empty-text="暂无数据"
      style="width: 100%">
      <el-table-column
        :index="(query.page - 1) * query.size + 1"
        type="index"
        label="序号"
        width="100" />
      <el-table-column
        prop="subjectName"
        label="科目"/>
      <el-table-column
        prop="chapterName"
        label="章节" />
      <el-table-column
        prop="rightAnswer"
        label="正确答案"
        width="120" />
      <el-table-column
        prop="type"
        label="试卷归属"
        width="180" />
      <el-table-column
        prop="examType"
        label="考试类型"
        width="180" />
      <el-table-column
        :formatter="toTime"
        prop="createTime"
        label="添加时间"/>
      <el-table-column
        :formatter="toTime"
        prop="updateTime"
        label="修改时间"/>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="edit(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="small" plain @click="deleteItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination :current-page="query.page" :page-size="query.size" :total="total" layout="prev, pager, next" @current-change="queryList" />
    </div>
  </el-card>
</template>

<script>
import axios from 'axios'
import Unix from '@/utils/unix'
import { PROBLEMS_CONTENT } from '@/constants/storage'
import { VERSION } from '@/constants/uri'
export default {
  data() {
    return {
      items: [],
      queryLoading: false,
      total: 0,
      version: VERSION,
      loading: false,
      query: {
        type: '科目',
        describes: 'all',
        examType: 'all',
        page: 1,
        size: 10
      }
    }
  },
  mounted() {
    this.queryList(1)
  },
  methods: {
    toTime(row, column) {
      const date = row[column.property]
      return Unix.unixToTime(date)
    },
    edit(id) {
      const temp = this.items.filter(item => item.id === id)
      sessionStorage.setItem(PROBLEMS_CONTENT, JSON.stringify(temp[0]))
      this.$router.push({ path: '/problems-manager/problems/edit/' + temp[0].id })
    },

    /*
 *   删除特定id行
 * */
    deleteItem(row) {
      if (!confirm('确定删除')) {
        return
      }
      axios.delete(`/delQuestList/${row.id}/${row.type}`).then(res => {
        if (res.success) {
          if (this.items.length > 1) {
            this.queryList(this.query.page)
          } else {
            this.queryList(this.query.page - 1)
          }
        }
      })
    },
    queryList(page = 1) {
      this.queryLoading = true
      this.query.page = page
      axios.post('/getQuestList', this.query).then(res => {
        this.queryLoading = false
        if (res.success) {
          this.items = res.data
          this.total = res.total
        }
      })
    },

    beforeUpload() {
      this.loading = true
    },
    uploadSuccess(res) {
      this.loading = false
      if (res.success) {
        this.queryList()
      } else {
        this.$message.error(res.message)
      }''
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
